import BaseTextInput from '@/components/Likk/CreateProFormText';
import TheUpload from '@/components/Upload';
import { getJoinTenantInfo, saveJoinTenantInfo } from '@/services/system/tenant';
import { getUrl, getUrlToList } from '@/utils';
import {
  ProForm,
  ProFormDatePicker,
  ProFormInstance,
  ProFormSelect,
} from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Form, Modal, message } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import payBankList from './bankIDList';

interface IMerchInComeProp {
  merchId: number | null;
  close: (isRefresh: boolean) => void;
}

const MerchInCome = (props: IMerchInComeProp) => {
  const intl = useIntl();
  const formRef = useRef<ProFormInstance>();
  const [loading, setLoading] = useState(false);

  const getMerchInfo = useCallback(() => {
    if (props.merchId !== null) {
      getJoinTenantInfo({ id: props.merchId }).then((res) => {
        if (res.code) {
          let info = {
            ...res.data,
            legalFrontIdCardUrl: getUrlToList(res.data.legalFrontIdCardUrl),
            legalReverseIdCardUrl: getUrlToList(res.data.legalReverseIdCardUrl),
            licenseUrl: getUrlToList(res.data.licenseUrl),
          };

          formRef.current?.setFieldsValue(info);
        }
      });
    }
  }, []);
  useEffect(() => {
    getMerchInfo();
  }, []);

  const sumbitFun = useCallback(() => {
    formRef?.current.validateFieldsReturnFormatValue().then((res) => {
      setLoading(true);
      let data = {
        ...res,
        id: props.merchId,
        legalFrontIdCardUrl: getUrl(res.legalFrontIdCardUrl),
        legalReverseIdCardUrl: getUrl(res.legalReverseIdCardUrl),
        licenseUrl: getUrl(res.licenseUrl),
      };
      saveJoinTenantInfo(data)
        .then((res) => {
          setLoading(false);
          if (res.code === 200) {
            message.success(res.msg);
            props.close(true);
          } else {
            message.error(res.msg);
          }
        })
        .catch((res) => {
          setLoading(false);
          message.error(res.msg || res.message);
        });
    });
  }, []);
  return (
    <Modal
      width={640}
      title={intl.formatMessage({
        id: 'system.Tenant.merchIncome',
        defaultMessage: '商户进件',
      })}
      open={true}
      onCancel={() => {
        props.close(false);
      }}
      confirmLoading={loading}
      onOk={sumbitFun}
    >
      <ProForm
        formRef={formRef}
        submitter={{
          render: () => {
            return '';
          },
        }}
      >
        <BaseTextInput width="md" name="tenantName" label="商户名称" required></BaseTextInput>

        <BaseTextInput width="md" name="corporationName" label="企业名称" required></BaseTextInput>

        <ProFormSelect
          name="scale"
          width="md"
          label="企业规模"
          request={async () => [
            {
              label: '大型',
              value: '01',
            },
            {
              label: '中型',
              value: '02',
            },
            {
              label: '小型',
              value: '03',
            },
            {
              label: '微型',
              value: '04',
            },
            {
              label: '其他',
              value: '98',
            },
          ]}
          rules={[
            {
              required: true,
              message: '请选择企业规模',
            },
          ]}
        ></ProFormSelect>
        <BaseTextInput width="md" name="authCapital" label="注册资本" required></BaseTextInput>
        <BaseTextInput width="md" name="businessScope" label="经营范围" required></BaseTextInput>
        <BaseTextInput width="md" name="tenantAddr" label="企业地址" required></BaseTextInput>

        <BaseTextInput width="md" name="legalName" label="法人姓名" required></BaseTextInput>

        <BaseTextInput name="legalCredentialNumber" width="md" label="法人身份证号码" required />

        <ProFormDatePicker
          name="legalPersonIssDate"
          label="法人身份证件有效期（起始）"
          width="md"
          rules={[
            {
              required: true,
              message: '请选择法人身份证件有效期（起始）',
            },
          ]}
        ></ProFormDatePicker>

        <ProFormDatePicker
          name="legalPersonExpiryDate"
          label="法人身份证件有效期（到期）"
          width="md"
          rules={[
            {
              required: true,
              message: '请选择法人身份证件有效期（到期）',
            },
          ]}
        ></ProFormDatePicker>

        <BaseTextInput name="legalPersonContactNumber" width="md" label="法人联系电话" required />

        <ProFormDatePicker
          name="allLicenceIssDate"
          label="营业执照有效期（起始)"
          width="md"
          rules={[
            {
              required: true,
              message: '请选择营业执照有效期（起始）',
            },
          ]}
        ></ProFormDatePicker>

        <ProFormDatePicker
          name="allLicenceExpiryDate"
          label="营业执照有效期（到期）"
          width="md"
          rules={[
            {
              required: true,
              message: '请选择营业执照有效期（到期）',
            },
          ]}
        ></ProFormDatePicker>

        <BaseTextInput width="md" name="contactEmail" label="联系人邮箱" required></BaseTextInput>

        <BaseTextInput
          width="md"
          name="tenantLicenseNo"
          label="营业执照号"
          required
        ></BaseTextInput>

        <Form.Item
          name="licenseUrl"
          label="营业执照"
          rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            // multiple={true}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>

        <Form.Item
          name="legalFrontIdCardUrl"
          label="法人身份证正面"
          rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            // multiple={true}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>

        <Form.Item
          name="legalReverseIdCardUrl"
          label="法人身份证反面 "
          rules={[{ required: true }]}
          extra="图片支持PNG、JPG、JPEG格式，大小不超过5MB"
        >
          <TheUpload
            listType="picture-card"
            maxCount={1}
            limitSize={5}
            // multiple={true}
            accept=".png, .jpg, .jpeg"
          />
        </Form.Item>

        <BaseTextInput
          width="md"
          name="bankCard"
          label="请填写公司对公账号"
          required
        ></BaseTextInput>

        <BaseTextInput width="md" name="bankName" label="开户银行" required></BaseTextInput>

        <BaseTextInput width="md" name="bankBranchName" label="开户支行" required></BaseTextInput>

        <ProFormSelect
          name="bankId"
          label="银行ID"
          width="md"
          request={async () => payBankList}
          rules={[
            {
              required: true,
              message: '请选择银行ID',
            },
          ]}
        ></ProFormSelect>

        {/* <BaseTextInput name="bankAccountName" width="md" label="银行账户名称" required />

        <BaseTextInput name="bankAccountNumber" width="md" label="银行账户号码" required /> */}
      </ProForm>
    </Modal>
  );
};

export default MerchInCome;
